<template>
	<view>
		<cu-custom bgColor="solid-bottom-after bg-white" :isBack="true"><block slot="backText">返回</block><block slot="content"></block></cu-custom>
		<view class="fyt-news">
			<view class="title">{{m.title}}</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round" style="background-image:url(http://bt.img.feiyit.com//mobile/templss/bt-logo.png);"></view>
					<view class="content" style="left:40px;">
						<view class="text-grey">{{m.author}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								来自于：{{m.source}}<text class="time">{{os.getDateDiff(m.editDate)}}</text>
							</view> 
						</view>
					</view>
					<view class="action">
						<button type="button" class="cu-btn round bg-yellow sm">关注</button>
					</view>
				</view>
			</view>
			<view class="text" v-html="htmlNodes">
			</view>
			<view class="tags">
				<view class="cu-tag radius" v-for="(it,index) in tags" :key="index">{{it.name}}</view>
			</view>
			<view class="shang">
				<view class="zi">赞</view>
				<text class="p">你的鼓励是我们前进的动力</text>
			</view>
			<view class="grid margin-bottom text-center col-4 tool">
				<view @click="praise"><button class="cu-btn round line-grey"><text class="cuIcon-appreciate"></text>260</button></view>
				<view @click="bxh"><button class="cu-btn round line-grey"><text class="cuIcon-delete"></text>不喜欢</button></view>
				<view><button class="cu-btn round line-grey" open-type="share"><text class="cuIcon-weixin text-green"></text>微信</button></view>
				<view><button class="cu-btn round line-grey" open-type="share"><text class="cuIcon-discoverfill text-green"></text>朋友圈</button></view>
			</view>
			<view class="cu-bar">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text>全部评论
				</view>
			</view>
			<view class="cu-card fyt-common">
				<view class="cu-list menu-avatar comment">
						<view class="cu-item" v-for="(it,index) in param.list" :key="index">
							<view class="cu-avatar round" :style="'background-image:url('+it.headPic+')'"></view>
							<view class="content">
								<view class="text-grey">{{it.userName}}}</view>
								<view class="text-gray text-content text-df">
									{{it.summary}}
								</view>
								<view class="bg-grey padding-sm radius margin-top-sm text-sm" style="display: none;">
									<view class="flex">
										<view>莫甘娜：</view>
										<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
									</view>
								</view>
								<view class="margin-top-sm flex justify-between">
									<view class="text-gray text-df">{{os.getDateDiff(it.addDate)}}<text class="reply">回复</text></view>
									<view>
										<text class="cuIcon-appreciatefill txt-red" style="display: none;"></text>
										<text class="cuIcon-appreciate text-gray"></text>
										<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
									</view>
								</view>
							</view>
						</view>
				</view>
				<view class="no-data" v-show="param.total==0">
					<image class="noimg" src="../../static/shafa.png"></image>
					<view class="no-text">还没有评论，你的机会来了</view>
				</view>
			</view>
		</view>
		<view class="cu-bar foot input common-foot" :style="[{bottom:InputBottom+'px'}]">
			<input class="common-input" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur" placeholder="写评论"  v-model="plm.summary"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn round bg-yellow shadow" @click="sendpl">发送</button>
		</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser';
	import {
	    mapState 
	} from 'vuex';  
	export default {
		data() {
			return {
				m:{},
				tags:[],
				htmlNodes: [],
				InputBottom: 0,
				plm:{
					summary:''
				},
				param:{
					page:1,
					total:0,
					types:1,
					guid:'',
					list:[]
				},
				pageshow:false,
				providerList: []
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		async onLoad(options){
			let id=options.id;
			this.plm.columnId=id;
			this.plm.userId=this.userInfo.guid;
			this.plm.userName=this.userInfo.nickName;
			this.plm.option=1;
			//查询评论需要的参数
			this.param.guid=id;
			uni.showLoading({
				title: 'loading'
			});
			var that=this;
			this.$api.ajax('index/article/info', {
				id:id
			}, function(res) {
				uni.hideLoading();
				var data = res[1].data;
				if (data.statusCode == 200) {
					console.log(data.data);
					that.m=data.data;
					if(that.m.tag){
						if(that.m.tag.indexOf(',')>-1){
							var strTag=that.m.tag.split(',');
							for(var i=0; i<strTag.length; i++){
								var item=strTag[i];
								if(item){
									that.tags.push({'name':that.m.tag});
								}
							}
						}else{
							that.tags.push({'name':that.m.tag});
						}
					}
					var htmlString = data.data.content.replace(/\\/g, "").replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
					that.htmlNodes = htmlParser(htmlString);
					// uni.setNavigationBarTitle({
					// 	title: data.data.title
					// })
					//加载评论
					that.initCommon();
				} else {
					that.$api.msg('网络失败');
				}
			});
			uni.getProvider({
				service: 'share',
				success: (e) => {
					console.log('success', e);
					let data = []
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '分享到微信好友',
									id: 'weixin',
									sort:0
								})
								data.push({
									name: '分享到微信朋友圈',
									id: 'weixin',
									type:'WXSenceTimeline',
									sort:1
								})
								break;
							default:
								break;
						}
					}
					this.providerList = data.sort((x,y) => {
						return x.sort - y.sort
					});
				},
				fail: (e) => {
					console.log('获取分享通道失败', e);
					uni.showModal({
						content:'获取分享通道失败',
						showCancel:false
					})
				}
			});
		},
		onShareAppMessage() {
			return {
				title: this.m.title,
				path: '/pages/index/index',
				imageUrl:this.m.imgUrl[0].image
			}
		},
		onReachBottom(){
			this.param.page+=1;
			if(this.param.page<=this.param.total){
				uni.showLoading({
					title: 'loading'
				});
				this.initCommon();
			}
		},
		methods: {
			async share(e){
				let shareOPtions = {
					provider: e.id,
					scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
					type: 1,
					success: (e) => {
						console.log('success', e);
						uni.showModal({
							content: '分享成功',
							showCancel:false
						})
					},
					fail: (e) => {
						console.log('fail', e)
						uni.showModal({
							content: e.errMsg,
							showCancel:false
						})
					},
					complete:function(){
						console.log('分享操作结束!')
					}
				}
				shareOPtions.summary = this.m.title;
				shareOPtions.imageUrl = this.m.imgUrl[0].image;
				uni.share(shareOPtions);
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			bxh(){
				this.$api.msg('哦~我们知道啦，我们争取达到您喜欢的程度');
			},
			//赞
			praise(){
				console.log(this.hasLogin);
				console.log(this.userInfo);
			},
			initCommon(){
				let _this = this;
				_this.$api.ajax('common/page',_this.param,function(res){
					if(_this.param.page!=1){
						uni.hideLoading();
					}
					var data = res[1].data;
					if (data.statusCode == 200) {
						//console.log(data.data);
						_this.param.total=data.data.totalPages;
						if(data.data.items.length>0){
							if(_this.param.page==1){
								_this.param.list=[];
							}
							for(var i=0; i<data.data.items.length; i++){
								_this.param.list.push(data.data.items[i]);
							}
						}
						else{
							_this.param.items=[];
							_this.pageshow=true;
						}
					}else{
						_this.$api.msg(data.message);
					}
				})
			},
			//发表评论
			sendpl(){
				let _this = this;
				if(this.plm.summary){
					uni.showLoading({
						title: 'loading'
					});
					_this.$api.ajax('common/add',_this.plm,function(res){
						uni.hideLoading();
						var data = res[1].data;
						if (data.statusCode == 200) {
							_this.plm.summary='';
							_this.param.page=1;
							_this.initCommon();
						}else{
							_this.$api.msg(data.message);
						}
					})
				}else{
					this.$api.msg('请输入评论内容~');
				}
			}
		}
	}
</script>

<style lang='scss'>
	.fyt-news{
		background-color: #ffffff;
		padding:15px;
		.title{
			font-size: 16px;
			line-height: 24px;
			color: #000;
			font-weight: 400;
		}
		.text{
			padding:10px 0;
			font-size:15px;
			line-height: 24px;
			p{
				margin-bottom: 15px;
			}
			img{
				width:100%;
			}
		}
		.shang{
			padding: 30px 0;
			text-align: center;
			font-size: 13px;
			.zi{
				font-size: 18px;
				font-weight: bold;
				width:35px;
				height: 35px;
				line-height: 35px;
				border-radius: 50%;
				border:1px solid #fbbd08;
				color: #fbbd08;
				display: inline-block;
			}
			.p{
				display: block;
				margin-top: 10px;
			}
		}
		.tool{
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 20px;
			.cu-btn{
				font-size: 12px;
			}
			uni-text{
				margin-right: 5px;
				font-size: 14px;
			}
		}
		.cu-bar .action:first-child{
			margin-left: 0px;
		}
		.cu-list.menu-avatar.comment>.cu-item{
			padding: 15px 0px 15px 45px;
		}
		.cu-list.menu-avatar>.cu-item .content{
			left:0px;
		}
		.text-df{
			font-size: 12px;
		}
		.fyt-common{
			padding-bottom: 60px;
			.reply{
				margin-left: 30px;
				color: #8799a3;
			}			
		}
		.no-data{
			text-align: center;
			.noimg{
				width:120px;
				height: 120px;
			}
			.no-text{
				color: #999;
			}
		}		
	}
	.common-foot{
		button{
			color: #ffffff;
		}
		.common-input{
			background-color: #f1f1f1;
			border-radius: 30px;
			overflow:hidden;
			padding:0 15px;
			font-size: 14px;
		}
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar{
		left: 0px;
	}
	.cu-list.menu-avatar>.cu-item .flex .text-cut{
		color: #fbbd08;
		.time{
			margin-left: 20px;
			color: #999;
		}
	}
	.cu-list.menu-avatar>.cu-item .action{
		width:100px;
		text-align: right;
		button{
			font-size:12px;
			color: #ffffff;
			padding: 0 20px;
		}
	}
</style>
